<template>
 	<view style="padding: 40rpx;">
 		<view class="tab_nav">
 			<view class="navTitle" v-for="(item,index) in navList" :key="index">
 				<view :class="{'active':current === index}" @click="checked(index)">
 					{{item.title}}
 				</view>
 			</view>
 		</view>

 		<view class="nav_item" v-if="current == 0">
 			<view v-for="i in datalist">
 				<view class="nav_item1" v-if="i.type=='月卡VIP'" @click="info(i.name,i.amount,i.msg)">
 					<view>
 						<p>{{i.name}}</p>
 						<p>{{i.amount}}元</p>
 						<p>{{i.msg}}</p>
 					</view>
 				</view>
 			</view>
 		</view>
		<view class="nav_item" v-if="current == 1">
			<view v-for="i in datalist">
				<view class="nav_item1" v-if="i.type=='季卡VIP'" @click="info(i.name,i.amount,i.msg)">
					<view>
						<p>{{i.name}}</p>
						<p>{{i.amount}}元</p>
						<p>{{i.msg}}</p>
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="current == 2">
			<view v-for="i in datalist">
				<view class="nav_item1" v-if="i.type=='年卡VIP'" @click="info(i.name,i.amount,i.msg)">
					<view>
						<p>{{i.name}}</p>
						<p>{{i.amount}}元</p>
						<p>{{i.msg}}</p>
					</view>
				</view>
			</view>
		</view>

 	</view>
 	
 </template>
 <script>
 	export default {
 		data() {
 			return {
 				current: 0,
 				navList: [{
 					index: 0,
 					title: '月卡VIP'
 				}, {
 					index: 1,
 					title: "季卡VIP"
 				}, {
 					index: 2,
 					title: "年卡VIP"
 				}],
 				datalist: [{
 						type: '月卡VIP',
 						name: '快洗 月卡',
 						amount: 200,
 						msg: '20次/1个月'
 					},
 					{
 						type: '月卡VIP',
 						name: '精细洗 月卡',
 						amount: 200,
 						msg: '10次/1个月'
 					},
 					{
 						type: '季卡VIP',
 						name: '快洗 季卡',
 						amount: 560,
 						msg: '60次/3个月'
 					},
 					{
 						type: '季卡VIP',
 						name: '精细洗 季卡',
 						amount: 560,
 						msg: '30次/3个月'
 					},
 					{
 						type: '年卡VIP',
 						name: '快洗 年卡',
 						amount: 1000,
 						msg: '50次/12个月'
 					},
 					{
 						type: '年卡VIP',
 						name: '精细洗 年卡',
 						amount: 1000,
 						msg: '25次/12个月'
 					}
 				]
 			}
 		},
 		methods: {
 			checked(index) {
 				this.current = index
 			},
			info(name,amount,msg){
				uni.navigateTo({
					url: './info?name='+name+'&amount='+amount+'&msg='+msg
				});
			}
 		}
 	}
 </script>


 <style lang="less" scoped>
	 page{
		 background-color: white;
	 }
 	.tab_nav {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}

 	.tab_nav .navTitle {
 		height: 90rpx;
 		line-height: 90rpx;
 		width: 100%;
 		text-align: center;
 		font-size: 32rpx;
 		font-family: Alibaba PuHuiTi;
 		color: #333;
 	}

 	.nav_item {
 		display: flex;

 		.nav_item1 {
 			width: 200rpx;
 			height: 200rpx;
 			line-height: 60rpx;
 			background-color: aliceblue;
 			margin: 20rpx;
 			text-align: center;
 		}
 	}

 	.active {
 		position: relative;
 		color: #1F75FE;
 	}

 	.active::after {
 		content: "";
 		position: absolute;
 		width: 100rpx;
 		height: 4rpx;
 		background-color: #1F75FE;
 		left: 0px;
 		right: 0px;
 		bottom: 0px;
 		margin: auto;
 	}

 	.voucher1 {
 		height: 40rpx;
 		padding-top: 40rpx;
 		display: flex;

 		.voucher2 {
 			height: 30rpx;
 			width: 10rpx;
 			background-color: #127FFF;
 			position: relative;
 			top: 6rpx;
 			border-radius: 90rpx;
 		}

 		.rech {
 			padding-left: 14rpx;
 			font-weight: bold;
 		}


 	}

 	.much {
 		padding-top: 40rpx;
 		height: 230rpx;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;

 		.much1 {
 			width: 30%;
 			height: 100rpx;
 			line-height: 100rpx;
 			text-align: center;
 			background-color: #F8F8F8;
 			border-radius: 30rpx;
 			color: #6E6E6E;

 			.much2 {
 				font-size: 20px;

 			}
 		}

 		.active {
 			width: 30%;
 			height: 100rpx;
 			line-height: 100rpx;
 			text-align: center;
 			background-color: #157DF7;
 			border-radius: 30rpx;
 			color: #6E6E6E;

 			.much2 {
 				font-size: 20px;

 			}
 		}
 	}

 	.ipt {
 		height: 100rpx;
 		line-height: 100rpx;
 		background-color: #F8F8F8;
 		border-radius: 30rpx;
 		color: #6E6E6E;
 	}

 	.pay {
 		padding-top: 40rpx;
 		height: 50rpx;
 		line-height: 50rpx;
 		display: flex;

 		.wx {
 			padding-left: 20rpx;
 		}

 		.radio-group {
 			position: absolute;
 			right: 50rpx;

 		}
 	}

 	.explain {
 		margin-top: 40rpx;
 		line-height: 50rpx;
 		background-color: #F8F8F8;
 		font-size: 15px;
 		color: #6E6E6E;
 	}

 	.btn {
 		margin: 110rpx 0;
 		background-color: #127FFF;
 		font-size: 18px;
 		color: white
 	}
 </style>
